<template>
  <el-form :model="models" :rules="rules" ref="qmGenForm" label-width="130px" class="qm-gen-form">
    <el-row>
      <el-col :span="24">
        <el-form-item label="证书标题：" prop="model.certTitle">
          <el-input v-model="models.model.certTitle"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="签名证书：" prop="model.certFile">
          <input type="file" @change="getFile($event, 'certificate', 'cert')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.certFile"
            v-text="models.model.certFileName"
          ></a>
          <p
            style="color: red; margin: 4px 0;"
          >* iOS 请上传.p12(pkcs12)或.cer格式的iPhone Distribution或iPhone Developer签名证书</p>
          <p style="color: red; margin: 4px 0;">* Android 请上传.keystore或.jks格式签名证书</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="签名证书密码：" prop="model.certPass">
          <el-input v-model="models.model.certPass"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="OS类型：" prop="model.certType">
          <el-select v-model="models.model.certType">
            <el-option value label="请选择"></el-option>
            <el-option value="Android" label="Android"></el-option>
            <el-option value="iOS" label="iOS"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="描述文件：" prop="model.descFile">
          <input type="file" @change="getFile($event, 'certificate', 'desc')" />
          <a
            target="_blank"
            :href="server + '/attachment/download?attachmentId=' + models.model.descFile"
            v-text="models.model.descFileName"
          ></a>
          <p
            style="color: red; margin: 5px 0;"
          >（iOS用）请上传.mobileprovision格式的文件，从苹果开发者网站Provisioning Profiles中下载</p>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="别名：" prop="model.alias">
          <el-input v-model="models.model.alias"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="别名密码：" prop="model.aliasPass">
          <el-input v-model="models.model.aliasPass"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="是否默认证书：" prop="model.isDefault">
          <el-switch v-model="models.model.isDefault"></el-switch>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="保留字段1：" prop="model.reserved1">
          <el-input v-model="models.model.reserved1"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="保留字段2：" prop="model.reserved2">
          <el-input v-model="models.model.reserved2"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="保留字段3：" prop="model.reserved3">
          <el-input v-model="models.model.reserved3"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "mobile-mobileAppCertificate-create",
  props: {
    models: Object,
    controlData: Object,
    pageAction: String,
    appId: String,
  },
  data() {
    return {
      rules: {
        "model.certTitle": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.certFile": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.certPass": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.certType": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
        "model.isDefault": [
          {
            required: true,
            message: "这是必填字段",
            trigger: "blur",
          },
        ],
      },
      server: process.env.VUE_APP_SERVER,
    };
  },
  methods: {
    getFile(event, type, busType) {
      let file = event.target.files[0];
      this.upload(file, type, busType);
    },
    upload(file, type, busType) {
      let formData = new FormData();
      formData.append("file", file);
      formData.append("dataKey", this.models.model.certId);
      formData.append("type", type);

      request({
        url: "/attachment/upload",
        method: "post",
        data: formData,
        header: { "Content-Type": "multipart/form-data" },
      })
        .then((r) => {
          if (r && r.attachmentId) {
            if (busType === "cert") {
              this.models.model.certFile = r.attachmentId;
              this.models.model.certFileName = r.fileName;
            } else {
              this.models.model.descFile = r.attachmentId;
              this.models.model.descFileName = r.fileName;
            }
            this.notifySuccess("上传成功");
          } else {
            this.notifyError((r || {}).message || "服务器出现异常，请稍后再试");
          }
        })
        .catch((e) => {
          this.notifyError((e || {}).message || "服务器出现异常，请稍后再试");
        });
    },
  },
  created() {
    if (this.pageAction === "create") {
      this.models.model.appId = this.appId;
    }
    this.$set(this.models.model, "certFileName", "");
    this.$set(this.models.model, "descFileName", "");

    let certAttachment = this.models.certAttachment;
    let descAttachment = this.models.descAttachment;
    if (certAttachment) {
      this.models.model.certFileName = certAttachment.fileName;
    }
    if (descAttachment) {
      this.models.model.descFileName = descAttachment.fileName;
    }
  },
};
</script>

<style scoped>
</style>